<template>
    <div>
        <form class="ra-form">
            <div class="ra-row">
                <span>菜品名称</span>
                <input type="text">
            </div>
            <div class="ra-row">
                <span>配料</span>
                <textarea></textarea>
            </div>
            <div class="ra-row">
                <span>步骤</span>
                <textarea></textarea>
            </div>
            <div class="ra-row">
                <span>上传视频</span>
                <div class="ra-file">
                    <input type="file">
                    <span class="el-icon-plus"></span>
                </div>
            </div>
            <div class="ra-row">
                <span>上传图片</span>
                <div class="ra-imgs">
                    <img src="https://cp1.douguo.com/upload/shicai/1446028243.jpg" alt="">
                </div>
                <div class="ra-file">
                    <input type="file">
                    <span class="el-icon-plus"></span>
                </div>
            </div>
            <div class="ra-row">
                <span>开放权限</span>
                <div class="ra-radios">
                    <input type="radio" id="ra-all"> <label for="ra-all">全部</label>
                    <input type="radio" id="ra-upload-v"> <label for="ra-upload-v">下载视频</label>
                    <input type="radio" id="ra-upload-i"> <label for="ra-upload-i">保存图片</label>
                    <input type="radio" id="ra-share"> <label for="ra-share">食谱分享</label>
                </div>
            </div>
            <div class="ra-row">
                <span></span>
                <div class="ra-btns">
                    <button class="ra-submit">保存</button>
                    <button class="ra-cancle">取消</button>
                </div>
            </div>
        </form>
    </div>
</template>
<script>

</script>

<style lang="less" scoped>
.ra-form{
    width: 750px;
    margin-top: 30px ;
    .ra-row{
        width: 100%;
        text-align:left;
        margin:15px 0;
        overflow: hidden;
        span{
            // display:inline-block;
            width: 100px;
            height: 35px;
            text-align:right;
            margin-right: 20px;
            float:left;
            letter-spacing:1px;
        }
        input[type="text"]{
            float:left;
            height: 35px;
            border: 2px solid rgba(0,0,0,0.3);
            line-height: 35px;
            padding: 0 10px;
            border-radius:3px;
            width: 500px;
        }
        textarea{
            width: 500px;
            height: 60px;
            padding: 12px 10px;
            border: 2px solid rgba(0,0,0,0.3);
            resize: none;
            border-radius:3px;
        }
        .ra-file{
            float: left;
            width: 100px; height:100px;
            position: relative;
            border: 2px solid rgba(0,0,0,0.3);
            input{
                width: 100%;height: 100%;
                opacity: 0;
                display: inline-block;
                position: absolute;
                top: 0;left:0;
                z-index: 2;
            }
            span{
                position: absolute;
                top: 50%;left: 50%;
                transform: translate(-50%, -50%);
                display: block;
                font-size:60px;
                width: 60px;height: 60px;
                font-weight:bold;
                color: rgba(0,0,0,0.3);
                z-index: 1;
            }
        }
        .ra-imgs{
            width: 100px;
            height: 100px;
            float: left;
            margin-right: 20px;
            img{
                width: 100%;height: 100%;
            }
        }
        .ra-radios{
            float: left;
            height: 35px;
            line-height: 35px;
            input{
                margin-left:10px;
                height:15px;
                width: 15px;
            }
        }
        .ra-btns{
            button{
                width: 80px;
                height: 35px;
                line-height: 35px;
                margin-right: 30px;
                border-radius: 4px;
                cursor: pointer;
            }
            button:nth-child(1){
                color: #fff;
                background-color: #ff9512;
            }
            button:nth-child(2){
                color: #000;
                background-color: #BFBFBF;
            }
        }
    }
}
</style>
